@switch (data().type) {
  @case ('AnalyticalCard') {
    <ngm-analytical-card
      [title]="data().title"
      [dataSettings]="data().dataSettings"
      [chartSettings]="chartSettings()"
      [slicers]="data().slicers"
      [options]="{
        showSlicers: true
      }"
      (explain)="setExplains($event)"
    >
      <button ngmAction class="btn pressable flex justify-center items-center w-6 h-6 rounded-full border-light"
        [matTooltip]="'PAC.Chat.OpenExplorer' | translate: {Default: 'Open Explorer'}"
        matTooltipPosition="above"
        (click)="openExplorer()">
        <i class="ri-expand-diagonal-2-line"></i>
      </button>
    
      <button ngmAction class="btn pressable flex justify-center items-center w-6 h-6 rounded-full border-light"
        [matTooltip]="'PAC.Chat.OpenExplain' | translate: {Default: 'Open Explain'}"
        matTooltipPosition="above"
        (click)="openExplain()">
        <i class="ri-terminal-box-line"></i>
      </button>
    </ngm-analytical-card>
  }
  @case ('KPI') {
    <pac-widget-kpi displayDensity="compact" [title]="data().title"
      [dataSettings]="data().dataSettings"
      [slicers]="data().slicers"
      [options]="{
        showToolbar: true,
        shortNumber: true,
        digitsInfo: '0.0-2'
      }"
      (explain)="setExplains($event)"
    >
      <button ngmAction class="btn pressable flex justify-center items-center w-6 h-6 rounded-full border-light"
        (click)="openExplain()">
        <i class="ri-terminal-box-line"></i>
      </button>
    </pac-widget-kpi>
  }
  @case ('Indicators') {
    <chat-component-indicators [indicators]="indicators()" class="dark"/>
  }
  @case ('NewIndicator') {
    <chat-component-indicator [indicator]="indicator()" class="dark"/>
  }
  @case ('Tasks') {
    <chat-component-tasks [tasks]="tasks()" class="dark"/>
  }
}
